<template>
  <div>
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
      <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
<!--      <el-button type="danger" size="mini" @click="handleEdit">评价</el-button>-->
    </el-button-group>
    <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
    <pdf
        :page="pageNum"
        :src="url"
        @progress="loadedRatio = $event"
        @num-pages="pageTotalNum=$event"
    ></pdf>
    <el-form >
      <el-form-item label="得分" >
        <el-input v-model="form.point"></el-input>
      </el-form-item>
      <el-form-item label="评语" >
        <el-input type="textarea" v-model="form.mark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
import pdf from 'vue-pdf'

export default {
  name: 'Pdf',
  components: {
    pdf,
  },
  data() {
    return {
      url: 'http://image.cache.timepack.cn/nodejs.pdf',
      pageNum: 1,
      pageTotalNum: 1,
      loadedRatio: 0,
      form:{
        mark:'',
        point:'',
      }
  }
  },
  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },

    handleEdit() {
      this.dialogFormVisible = true;
    },
  }
}
</script>